<template>
	<view class="u-p-30">
		<view class="bg_FFFFFF u-p-20 u-b-r-20">
			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="">修改头像</view>
				<!-- #ifdef MP-WEIXIN -->
				<button style="margin: 0; padding: 0;" class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
				    <u-image class="avatar" width="150rpx" height="150rpx" mode="aspectFill" :src="userinfo.avatar"></u-image>

				</button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-upload @on-success="uploaded" upload-text="点击更换" @on-remove="remove" :preview-full-image="false"
					:file-list="fileList" imageMode="aspectFit" :show-progress="false" width="150rpx" height="150rpx"
					ref="uUpload"  max-count="1" :name="'img'">
				</u-upload>
				<!-- #endif -->
				
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="">昵称</view>
				<!-- #ifdef MP-WEIXIN -->
				
				<u-input type='nickname' v-model="nickname"  @blur="handleNikeNameBlur" name="nikename" placeholder='请输入昵称' input-align='right'></u-input>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
					<u-input type='text' v-model='userinfo.name' placeholder='请输入昵称'  input-align='right'></u-input>
				<!-- #endif -->
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="">用户名</view>
				<u-input type='text' v-model='username' placeholder='请输入昵称' input-align='right'></u-input>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="">性别</view>
				<view @click="show=true" class=" u-weight u-font-28">{{text}}
					<u-icon name='arrow-right' size='20'></u-icon>
				</view>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;"
				@click="change_mobile">
				<view class="">手机号</view>
				<view class=" u-weight u-font-28">{{userinfo.mobile}}</view>
			</view>

			<view class="u-flex u-row-between u-b-r-20 u-m-t-20" style="background-color:#F5F5F5FF ; padding: 20rpx;">
				<view class="">身份</view>
				<view class=" u-flex">
					<view class="u-p-r-10" style="margin-top: -10rpx;">
						<u-image src="https://www.sqkjkj.vip/wxImg/my/img33.png" mode="aspectFill" width="24rpx" height='24rpx'>
						</u-image>
					</view>
					<view class="u-flex">
						<view @click="$u.route(`${userinfo.vip_id<=0?'/pages/vip/vip':''}`)" class="u-font-20" style="color: #B9A09AFF;">{{userinfo.vip_id==3?'高级会员':userinfo.vip_id==2?'中级会员':userinfo.vip_id==1?'初级会员':'开通会员'}}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="u-w-640 u-fix u-b-50 u-h-100 u-l-h-100 cl_FFF u-text-center u-b-r-16 u-m-l-20"
			style="background: linear-gradient(-64deg, #FF382C, #FF633F);" @click="save">保存</view>
		<!-- 选择性别 -->
		<u-select v-model="show" :list="list" @cancel='show=false' @confirm='confirm'></u-select>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import api from 'common/apiUrl.js'
	export default {
		data() {
			return {
				show: false,
				userinfo: '',
				text: "男",
				fileList: [],
				name: '',
				username:'',
				nickname:'',
				sex: '',
				// 表单参数
				model: {
					avatar: '',
					name: ''
				},
				list: [{
						value: '1',
						label: '男'
					},
					{
						value: '2',
						label: '女'

					},
					{
						value: '3',
						label: '保密'

					}
				],
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo')
			this.username = this.userinfo.username
			this.nickname = this.userinfo.name
			this.text=this.userinfo.sex==1?'男':this.userinfo.sex==2?'女':'保密'
			this.fileList.push({
				url: this.userinfo.avatar
			})
		},
		methods: {
			handleNikeNameBlur(e){
				// setTimeout(()=>{
				// 	this.nickname = e
				// },500)
				this.nickname = e
			},
			onChooseAvatar(e){
                const { avatarUrl } = e.detail 
				uni.uploadFile({
					url: `${api.apiUrl}/system/basic/postUploadOne`,
					filePath: avatarUrl,
					name: 'img',
					header:{
						Authorization: uni.getStorageSync("token")
					},
					success: res => {
						let data = JSON.parse(res.data)
						this.model.avatar =data.path
						this.userinfo.avatar = data.path
					},
					fail: e => {
						
					},
					complete: res => {
						
					}
				});
			},
			confirm(e) {
				this.text = e[0].label
				this.sex = e[0].value
				this.show = false
			},
			// 修改头像
			uploaded(lists) {
				this.model.avatar = lists.id
				this.userinfo.avatar = lists.path
			},
			// 移除图片
			remove(index, lists) {
				this.fileList = []
			},
			// 点击更换手机号
			change_mobile() {
				uni.showToast({
					icon: 'none',
					title: '手机号不可更改'
				})
			},
			// 点击保存
			save() {
				if (this.nickname == '') {
					uni.showToast({
						title: '请输入昵称',
						icon: 'error'
					})
				} else if (this.username == '') {
					uni.showToast({
						title: '请输入用户名',
						icon: 'error'
					})
				} else {
					this.$api.change_massage({
						avatar: this.userinfo.avatar,
						name: this.nickname,
						username: this.username,
						sex: this.sex
					}, res => {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
						if (res.data.code == 1) {
							const isToUrl = uni.getStorageSync('isToUrl')
							if (isToUrl) {
								uni.redirectTo({
									url: isToUrl,
									fail: (err) => {
										console.log(err)
									},
									complete: (ss) => {
										uni.removeStorageSync('isToUrl')
										uni.switchTab({
											url: isToUrl,
										})
										console.log(ss)
									}
								})
								return
							} 
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/my/my'
								})
							}, 500)

						}
					})
				}
			}
		}
	}
</script>

<style scoped>
	page {
		background: #F5F5F5FF !important;
	}
</style>
